<template>
    <el-container>
      <el-header>
        <goback :content=name></goback>
      </el-header>
      <el-main>
        <el-row justify="space-between">
          <el-col :span="8">
            <div class="trade-box">
              <div class="h4-title">交易前</div>
              <div class="menu-box fcol">
                <div class="h4-title h3-title" @click="gotoPage('/purchase/orderRequest',{title:'订单需求'})">订单需求</div>
                <div class="h4-title h3-title">加紧订单需求</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="trade-box">
              <div class="h4-title">交易中</div>
              <el-table
              :data="processList.processing"
              :show-header="false"
              height="220px"
              @row-click="jumpOrder"
              >
                <el-table-column prop="id" fixed width="100"></el-table-column>
                <el-table-column prop="title" align="left"></el-table-column>
              </el-table>


            </div>
          </el-col>
          <el-col :span="8">
            <div class="trade-box">
              <div class="h4-title">交易后</div>
              <el-table
                :data="processList.completed"
                :show-header="false"
                height="220px"
                @row-click="jumpOrder"
              >
                <el-table-column prop="id" fixed width="100"></el-table-column>
                <el-table-column prop="title"></el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <router-view></router-view>
    </el-container>
</template>

<script>
  import goback from "../common/goback";
  import {getOrderList} from "../../apilist/Supplier";

  export default {
        name: "purchaseHome",
        data(){
            return {
              name: '采购',
              processList: [],
            }
        },
        components: {goback},
        methods: {
            gotoPage(path,query){
                this.$router.push(
                    {
                        path: path,
                        query: query
                    }
                );
            },
            jumpOrder(r,c,e){
                this.$router.push(
                    {
                        path: '/purchase/detail',
                        query: {
                            id: r.id,
                            name: r.title
                        },
                    }
                )
            }
        },

        mounted() {
            getOrderList().then(res => {
                this.processList = res.data
            });
        }

    }
</script>

<style scoped>
.trade-box{
  width:500px;
  height:260px;
  border:1px solid #fff;
  border-radius: 20px;
}
  .h4-title{
    text-align: center;
    width:100%;
    height:40px;
    line-height: 40px;
    background-color: #1E9FFF;
    color:#fff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }
  .menu-box{
    margin-top: 5px;
    height:60%;
  }
.h3-title{
  height:60px;
  line-height: 60px;
  border-radius:0px;
}
</style>
